<template>
    <div class="CompontensViews">
        <div class="scroo">

            <!-- <div class="row">
                <div class="label"> 系統番号/名称 </div>
                <div class="iptbox">
                    <el-input v-model="Data.codName" class="ipt orange"
                        @input="Data.codName = $setMaxLength(Data.codName, 60)"></el-input>
                    <el-input v-model="Data.codFlna" class="ipt"
                        @input="Data.codFlna = $setMaxLength(Data.codFlna, 40)"></el-input>
                    <el-input v-model="Data.codOrdr" class="ipt orange center"
                        @input="Data.codOrdr = Number($setMyNum(Data.codOrdr, '4 - 0')) == 0 ? null : Number($setMyNum(Data.codOrdr, '4 - 0'))"></el-input>
                </div>
            </div> -->
            <div class="row1">
                <div class="label">{{ Label[0].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :rows="4" v-model="Data.comment1" class="iptarea"
                        @input="Data.comment1 = $setMaxLength(Data.comment1, 1400)"></el-input>
                </div>
            </div>
            <div class="row1">
                <div class="label">{{ Label[1].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :rows="4" v-model="Data.comment2" class="iptarea"
                        @input="Data.comment2 = $setMaxLength(Data.comment2, 1400)"></el-input>
                </div>
            </div>
            <div class="row1">
                <div class="label">{{ Label[2].dataVal }}</div>
                <div class="iptAreaBox">
                    <el-input type="textarea" resize="none" :rows="4" v-model="Data.comment5" class="iptarea"
                        @input="Data.comment5 = $setMaxLength(Data.comment5, 1400)"></el-input>
                </div>
            </div>

            <div class="tips">
                <span>運転条件、プロセス条件</span>
                <div class="addBtn">
                    <el-button type="default" size="mini" @click="GetInitSysIntelligenceFn(2)">追加</el-button>
                    <el-button type="default" size="mini" @click="delFn"
                        :disabled="Data.equipOperCondiList == 0">削除</el-button>
                </div>
            </div>

            <ux-grid class="ux-table" ref="singleTable" :data="Data.equipOperCondiList" :header-cell-style="{
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: '14px',
                textAlign: 'left',
                fontWeight: 'bold',
                padding: 0,
                height: '32px',
                background: 'rgb(244,245,246)'
            }" :cell-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14px',
                textAlign: 'left',
                padding: 0,
                height: '32px',
            }" :checkbox-config="{
                showHeader: false,
            }" @current-change="handleCurrentChange" highlight-current-row element-loading-spinner="el-icon-loading"
                element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
                <template slot="empty"> No data </template>

                <ux-table-column property="label" title=" " width="50" align="center">
                    <template slot-scope="scope">
                        <p style="text-align: center;">{{ scope.row.id }}</p>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="パラメータ" width="190">
                    <template slot-scope="scope">
                        <el-input class="table-input" v-model="scope.row.clPara"
                            @input="scope.row.clPara = $setMaxLength(scope.row.clPara, 40)"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="値" width="190" align="center">
                    <template slot-scope="scope">
                        <el-input class="table-input center" v-model="scope.row.clType"
                            @input="scope.row.clType = $setMaxLength(scope.row.clType, 20)"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="単位" width="190" align="center">
                    <template slot-scope="scope">
                        <el-input class="table-input center" v-model="scope.row.clUnit"
                            @input="scope.row.clUnit = $setMaxLength(scope.row.clUnit, 20)"></el-input>
                    </template>
                </ux-table-column>
                <ux-table-column property="label" title="備考" width="376">
                    <template slot-scope="scope">
                        <el-input class="table-input" v-model="scope.row.clNote"
                            @input="scope.row.clNote = $setMaxLength(scope.row.clNote, 50)"></el-input>
                    </template>
                </ux-table-column>
            </ux-grid>


        </div>
    </div>
</template>

<script>
import { GetEquipInformation, GetInitSysIntelligence, GetSysIntelligenceMsg } from "@/api/api";
import _ from 'lodash-es';
export default {
    name: "BasicStyleCompontens",
    props: ["PltCode", "Code", "Label"],
    data() {
        return {
            tabs_list: [
                { title: "系統情報", },
                { title: "損傷要因", },
                { title: "関連図書", },
            ],
            activeFlag: 0,
            prposTabelData: [],
            Data: {},
            DataClone: {},
            isAddFlg: false,

            handleRow: {},
        };
    },
    components: {
    },
    watch: {
        PltCode: {
            handler(newName, oldName) {
                this.GetEquipInformationFn();
            },
            immediate: true,
            deep: true,
        },
        Code: {
            handler(newName, oldName) {
                console.log(this.Code, 111);
                this.GetEquipInformationFn();
            },
            immediate: true,
            deep: true,
        },
        Data: {
            handler(newName, oldName) {
                console.log(this.Data, this.DataClone);
                this.$emit('isChangeFlgFn', _.isEqual(this.Data, this.DataClone))
            },
            immediate: true,
            deep: true,
        },
    },
    computed: {

    },
    methods: {
        handleCurrentChange(val) {
            console.log(val)
            this.handleRow = val;
        },
        async GetEquipInformationFn() {
            this.Data = {};
            this.DataClone = {};
            this.handleRow = {};
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Code: this.Code || -1,
            };
            let res = await GetEquipInformation(dataJson);
            if (res.data.code == 0) {
                res.data.data.equipOperCondiList.forEach((item, index) => {
                    item.id = index + 1;
                })

            }


            this.DataClone = _.cloneDeep(res.data.data);

            this.Data = _.cloneDeep(res.data.data);
            this.$emit('isAddFlgFn', false);
            //  无数据时，将表格重置为数组
            if (res.data.code == -310) {
                this.Data = {
                    equipOperCondiList: [
                        // {
                        //     "clPara": "",
                        //     "clType": "",
                        //     "clUnit": "",
                        //     "clNote": "",
                        //     "code": "",
                        //     "id": ""
                        // }
                    ]
                };
                this.DataClone = {
                    equipOperCondiList: [
                        // {
                        //     "clPara": "",
                        //     "clType": "",
                        //     "clUnit": "",
                        //     "clNote": "",
                        //     "code": "",
                        //     "id": ""
                        // }
                    ]
                };
                this.handleRow = {};
                return
            }

            this.handleRow = this.Data.equipOperCondiList[0];
            this.$refs.singleTable.setCurrentRow(this.handleRow);
        },
        async delFn() {
            // let tips = await this.GetSysIntelligenceMsgFn();
            // this.$confirm(tips, '', {
            //     confirmButtonText: this.$t("message.public.confirm"),
            //     cancelButtonText: this.$t("message.public.cancel"),
            //     type: "warning",
            // })
            //     .then(() => {
            var temp = 0;
            this.Data.equipOperCondiList = this.Data.equipOperCondiList.filter((item, index) => {
                if (item.id == this.handleRow.id) {
                    temp = index != 0 ? index - 1 : 0;
                }
                return item.id != this.handleRow.id
            })
            if (this.Data.equipOperCondiList.length == 0) {
                this.handleRow = {};
                return
            }
            this.handleRow = this.Data.equipOperCondiList[temp];
            this.$refs.singleTable.setCurrentRow(this.Data.equipOperCondiList[temp]);
            setTimeout(() => {
                this.$refs.singleTable.pagingScrollTopLeft(temp * 32);
            }, 300);
            // })
            // .catch(() => { });
        },
        //  获取提示信息
        async GetSysIntelligenceMsgFn() {
            let dataJson = {
                PltCode: this.PltCode,
                MacName: this.handleRow.clPara,
                type: 3
            };
            let res = await GetSysIntelligenceMsg(dataJson);
            return res.data.msg;
        },
        // 获取追加默认值   addFn
        async GetInitSysIntelligenceFn(Type) {
            console.log('this.Data.equipOperCondiList', this.Data.equipOperCondiList);
            //  如果初始数据为空
            let dataJson = {
                PltCode: this.PltCode || this.$store.state.pltCode,
                Type
            };
            let res = await GetInitSysIntelligence(dataJson);
            if (Type == 2) {
                let item = res.data.data;
                // item.code = Number(this.Code);
                delete item.code;
                delete item.clCode;
                item.id = this.Data.equipOperCondiList.length == 0 ? 1 : Number(this.Data.equipOperCondiList[this.Data.equipOperCondiList.length - 1].id) + 1;
                this.Data.equipOperCondiList.push(item);
                this.handleRow = item;
                this.$refs.singleTable.setCurrentRow(item);
                setTimeout(() => {
                    this.$refs.singleTable.pagingScrollTopLeft(99999);
                }, 300);
            }
        },
        // delFn() {

        // }
    },

    created() {
    },
    mounted() {
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.CompontensViews {
    max-width: 71.2%;
    max-height: 93.7%;
    position: relative;
    overflow: scroll;
    border: 1px solid #ccc;

    // &::-webkit-scrollbar {
    //     width: 0;
    // }


    .scroo {
        width: 1020px;
        padding: 8px 6px 0 16px;

        .row {
            margin-top: 8px;
            display: flex;
            align-items: center;
            padding-right: 23px;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptbox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                >.ipt:nth-child(1) {
                    width: 30%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(2) {
                    width: 57%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }

                >.ipt:nth-child(3) {
                    width: 10%;
                    height: 32px;

                    ::v-deep .el-input__inner {
                        width: 100%;
                        height: 32px;
                    }
                }
            }

            .orange {
                ::v-deep .el-input__inner {
                    background-color: #FEDDB1;
                }
            }

            .center {
                ::v-deep .el-input__inner {
                    text-align: center;
                }
            }
        }

        .row1 {
            margin-top: 8px;
            display: flex;

            .label {
                width: 100px;
                min-width: 100px;
                max-width: 100px;
                padding-right: 3px;
            }

            .iptAreaBox {
                width: 872px;

                ::v-deep .el-textarea__inner {
                    width: 100%;
                }
            }
        }
    }

    .tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        font-weight: 700;
        padding-right: 26px;
    }


    .table-input {
        ::v-deep .el-input__inner {
            background: none;
            border: 0 none;
            padding: 0;
            height: 32px;
        }
    }

    .addBtn {
        .el-button {
            min-width: 60px;
            width: 60px;
            border-radius: 4px !important;
        }
    }

    .center {
        ::v-deep .el-input__inner {
            text-align: center;
        }
    }

    ::v-deep .elx-table--body-wrapper {
        height: 150px !important;
    }

    ::v-deep .elx-table--empty-placeholder {
        // margin-top: 30px;
        height: 100% !important;
    }
}
</style>
